<template>
  <div class="snack-detail" v-if="snack">
    <el-row :gutter="40">
      <!-- 左侧图片区 -->
      <el-col :span="12">
        <div class="image-container">
          <img :src="snack.cover" :alt="snack.name" class="main-image">
          <div class="image-gallery">
            <img v-for="(img, index) in snack.gallery" 
                 :key="index" 
                 :src="img" 
                 class="thumbnail">
          </div>
        </div>
      </el-col>

      <!-- 右侧信息区 -->
      <el-col :span="12">
        <div class="info-container">
          <h1>{{ snack.name }}</h1>
          <div class="brand">{{ snack.brand }}</div>
          
          <div class="price-box">
            <span class="price">${{ snack.price }}</span>
            <span class="original-price" v-if="snack.originalPrice">
              ${{ snack.originalPrice }}
            </span>
          </div>

          <div class="specs">
            <div class="spec-item">
              <span class="label">Weight:</span>
              <span>{{ snack.weight }}g</span>
            </div>
            <div class="spec-item">
              <span class="label">Shelf Life:</span>
              <span>{{ snack.shelfLife }}</span>
            </div>
            <div class="spec-item">
              <span class="label">Storage:</span>
              <span>{{ snack.storage }}</span>
            </div>
          </div>

          <div class="quantity-selector">
            <span class="label">Quantity:</span>
            <el-input-number v-model="quantity" :min="1" :max="99" />
          </div>

          <div class="action-buttons">
            <el-button type="primary" size="large" @click="addToCart">
              Add to Cart
            </el-button>
            <el-button size="large" @click="buyNow">
              Buy Now
            </el-button>
          </div>

          <div class="description">
            <h3>Product Description</h3>
            <p>{{ snack.description }}</p>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 推荐商品 -->
    <div class="recommendations">
      <h2>You May Also Like</h2>
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in recommendations" :key="item.id">
          <el-card @click="goToDetail(item.id)" class="recommend-card">
            <img :src="item.cover" :alt="item.name">
            <h4>{{ item.name }}</h4>
            <div class="price">${{ item.price }}</div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SnackDetail',
  data() {
    return {
      quantity: 1,
      snack: {
        id: 1,
        name: 'Premium Mixed Nuts',
        brand: 'Nature\'s Best',
        price: 12.99,
        originalPrice: 15.99,
        weight: 300,
        shelfLife: '12 months',
        storage: 'Store in a cool, dry place',
        cover: '/images/mixed-nuts.jpg',
        gallery: [
          '/images/mixed-nuts-1.jpg',
          '/images/mixed-nuts-2.jpg',
          '/images/mixed-nuts-3.jpg'
        ],
        description: 'Premium selection of mixed nuts including almonds, cashews, pecans, and macadamia nuts. Perfect for healthy snacking.'
      },
      recommendations: [
        {
          id: 2,
          name: 'Dark Chocolate',
          price: 5.99,
          cover: '/images/chocolate.jpg'
        },
        // ... more recommendations
      ]
    }
  },
  methods: {
    addToCart() {
      this.$store.commit('addToCart', {
        ...this.snack,
        quantity: this.quantity
      });
      this.$message.success('Added to cart successfully');
    },
    buyNow() {
      this.addToCart();
      this.$router.push('/checkout');
    },
    goToDetail(id) {
      this.$router.push(`/snack/${id}`);
    }
  }
}
</script>

<style scoped>
.snack-detail {
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.image-container {
  .main-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
  }

  .image-gallery {
    display: flex;
    gap: 10px;
    margin-top: 20px;

    .thumbnail {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 4px;
      cursor: pointer;
      
      &:hover {
        border: 2px solid #409EFF;
      }
    }
  }
}

.info-container {
  h1 {
    margin: 0 0 10px 0;
    font-size: 24px;
  }

  .brand {
    color: #909399;
    margin-bottom: 20px;
  }

  .price-box {
    margin: 20px 0;
    
    .price {
      font-size: 28px;
      color: #f56c6c;
      font-weight: bold;
    }

    .original-price {
      margin-left: 10px;
      color: #909399;
      text-decoration: line-through;
    }
  }

  .specs {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;

    .spec-item {
      margin-bottom: 10px;
      
      .label {
        color: #909399;
        margin-right: 10px;
      }
    }
  }

  .quantity-selector {
    margin: 20px 0;
    
    .label {
      margin-right: 20px;
    }
  }

  .action-buttons {
    display: flex;
    gap: 20px;
    margin: 30px 0;
  }

  .description {
    margin-top: 40px;
    
    h3 {
      margin-bottom: 15px;
    }
  }
}

.recommendations {
  margin-top: 60px;
  
  h2 {
    margin-bottom: 30px;
  }

  .recommend-card {
    cursor: pointer;
    transition: transform 0.3s;

    &:hover {
      transform: translateY(-5px);
    }

    img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    h4 {
      margin: 10px 0;
    }
  }
}
</style>